<template>
  <div class="recommend-tab">
    <div class="tabs" v-for="item in tabs" :key="item.index">
      <h1
        @click="tabSongs(item.index)"
        class="recommend-list-title"
        :style="{color: (item.index === currentIndex ? '#ffcd32' : 'rgba(255, 255, 255, 0.5)') }"
      >{{ item.name }}</h1>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
  private currentIndex = 0
  // 歌单切换tabs
  private tabs = [
    {
      name: '为你推荐',
      index: 0
    },
    {
      name: '网络歌曲',
      index: 1
    },
    {
      name: 'ktv热歌',
      index: 2
    },
    {
      name: '夜店',
      index: 3
    },
    {
      name: '官方歌单',
      index: 4
    },
    {
      name: '情歌',
      index: 5
    }
  ]
  tabSongs(index: number) {
    this.currentIndex = index
    this.$emit('changeScroll', index)
  }
}
</script>

<style lang="stylus" scoped>
.tabs {
  margin: 0 22px;
  flex-shrink: 0;
}

.recommend-list-title {
  height: 65px;
  line-height: 65px;
  text-align: center;
  font-size: 14px;
  // color: #ffcd32;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  padding: 0;
}

.recommend-tab {
  margin: 0 auto;
  height: 65px;
  flex: 1;
  width: 130%;
  display: flex;
  justify-content: space-between;
}
</style>
